<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning vue.js</title>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
</head>
<body>
<div id="app">
    
    <h1>Vue elementui 入门</h1>
    <hr />
    
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>

    <el-form v-loading="loading"  :model="formInline" size="small">

        <el-form-item label="协作类别">
            <el-radio-group v-model="formInline.coltype">
                <el-radio label="1" border>取证勘验</el-radio>
                <el-radio label="2" border>数据查询</el-radio>   
                <el-radio label="3" border>协查调证</el-radio>   
            </el-radio-group>
        </el-form-item>
  
        <el-form-item label="检材种类">
            <el-radio-group v-model="formInline.sampletype">
                <el-radio v-for="st in sampletypes" :key="st.id" :label="st.val" border>{{ st.text }}</el-radio>>   
            </el-radio-group>
        </el-form-item>


        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>


        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>

      </el-form>

</div>

<script type="text/javascript">


var vm = new Vue({
      el: '#app',
      data: function() {
        return { 
            visible: false,
            loading: false,
            formInline: {
                user: 'liux',
                region: '341823',
                coltype: '2'
            },
            sampletypes: [ ]
        }
      },
      created:function(){
        this.loading = true;
        axios.get('http://127.0.0.1:8000/')
            .then(function (response) {
              this.loading = false;
              sampletypes = response.data;
            })
            .catch(function (error) {
              this.loading = false;
              this.$message({
                message: '数据加载出错...',
                type: 'error'
              });
            });
      },
      methods: {
        onSubmit() {
          console.log('submit!');
          //this.loading = true;
          this.$message({
            message: '恭喜你，这是一条成功消息:  ' + this.formInline.sampletype ,
            type: 'success'
            });
      }
    }
    })

</script>

</body>
</html>